<template>
  <div>
    <!-- 添加一个单一的根元素 -->
    <el-dialog :visible="dialogVisible" title="维修信息" width="50%">
      <el-form :model="form" ref="form">
        <el-form-item label="业主姓名" :label-width="formLabelWidth">
          <el-input v-model="form.ownerName" disabled />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.contactNumber" disabled />
        </el-form-item>
        <el-form-item label="维修编号" :label-width="formLabelWidth">
          <el-input v-model="form.repairNumber" disabled />
        </el-form-item>
        <el-form-item label="维修内容" :label-width="formLabelWidth">
          <el-input v-model="form.repairContent" disabled />
        </el-form-item>
        <el-form-item label="维修状态" :label-width="formLabelWidth">
          <el-select v-model="form.repairStatus" placeholder="请选择维修状态">
            <el-option
              v-for="item in repairStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="form.createTime" disabled />
        </el-form-item>
        <el-form-item label="房屋地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" disabled />
        </el-form-item>
        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-input v-model="form.roomNumber" disabled />
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="form.floor" disabled />
        </el-form-item>
        <el-form-item label="更换维修员工" :label-width="formLabelWidth">
          <el-select v-model="form.repairer" placeholder="请选择维修员工">
            <el-option
              v-for="item in repairerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import { ref, onMounted } from 'vue'

// export default {
//   setup() {
//     const dialogVisible = ref(false)
//     const form = ref({
//       ownerName: '',
//       contactNumber: '',
//       repairNumber: '',
//       repairContent: '',
//       repairStatus: '',
//       createTime: '',
//       address: '',
//       roomNumber: '',
//       floor: '',
//       repairer: ''
//     })
//     const formLabelWidth = ref('120px')
//     const repairStatusOptions = ref([
//       { value: '未派修', label: '未派修' },
//       { value: '已派修', label: '已派修' }
//     ])
//     const repairerOptions = ref([
//       { value: '张三', label: '张三' },
//       { value: '李四', label: '李四' }
//     ])

//     const showRepairInfo = (repairInfo) => {
//       dialogVisible.value = true
//       Object.assign(form.value, repairInfo)
//     }

//     const submitForm = () => {
//       // 发送请求更新维修信息
//       // 假设后端接口为 /update-repair-info
//       fetch('/update-repair-info', {
//         method: 'POST',
//         headers: {
//           'Content-Type': 'application/json'
//         },
//         body: JSON.stringify(form.value)
//       })
//       .then(response => response.json())
//       .then(data => {
//         console.log('维修信息更新成功', data)
//         dialogVisible.value = false
//       })
//       .catch(error => {
//         console.error('更新维修信息失败', error)
//       })
//     }

//     return {
//       dialogVisible,
//       form,
//       formLabelWidth,
//       repairStatusOptions,
//       repairerOptions,
//       showRepairInfo,
//       submitForm
//     }
//   }
// }
</script>
